import React, { useEffect, useRef, useState } from 'react';
import { Card, Modal, Divider, Form, Image, message } from 'antd';
import { connect, useRequest } from "umi";
import { province, city, area, prodtree } from '@/services/basic';
import InitForm from '@/components/InitForm';
import AutoTable from '@/components/AutoTable';
import { doFetch } from '@/utils/doFetch';
import ProDescriptions from '@ant-design/pro-descriptions';


let defaultFields = {
    "validDate": {
        "value": null,
        "type": "datepicker",
        "title": "生效日期",
        "name": [
            "validDate"
        ],
        "required": false,
        "format": "YYYY-MM-DD",
        "showTime": false,
        "disabledDate": null,
        "disabledDateTime": null
    },
    "expireDate": {
        "value": null,
        "type": "datepicker",
        "title": "失效日期",
        "name": [
            "expireDate"
        ],
        "required": false,
        "format": "YYYY-MM-DD",
        "showTime": false,
        "disabledDate": null,
        "disabledDateTime": null
    },
    "urlIds": {
        "value": null,
        "type": "upload",
        "title": "文件",
        "name": [
            "urlIds"
        ],
        "required": false,
        "listType": "img",
        "multiple": true,
        "limit": 5,
        "col": {
            "span": 24
        }
    }
};

let Certificate = (props) => {
    const { global, dispatch } = props;

    const [vs, cvs] = useState(false),//表单显/隐
        [iftype, ciftype] = useState({}),
        [sub, dosub] = useState([]),
        [data, cdata] = useState({});


    const { run, loading } = useRequest(doFetch, {
        manual: true,
        formatResult: (res) => res,
        onSuccess: (result, params) => {
            message.destroy()
            if (result.code == "0000") {
                if (Object.keys(params[0].params).indexOf("detailAuditList") != -1) {
                    message.success("操作成功");
                    run({ url: "/ngic-promote-company/omCompanyCertificateAudit/queryBeforeAddAudit", params: {} })
                    cvs(false);
                } else {
                    let response = result.data.data, newarr = [];
                    cdata(response);
                    if (response?.detailAuditList) {
                        newarr = response?.detailAuditList && response?.detailAuditList.map((item, index) => {
                            return {
                                urlIds: item.urlIds,
                                expireDate: item.expireDate,
                                validDate: item.validDate,
                                certificateType: item.certificateType
                            }
                        })
                    }
                    dosub(newarr)
                    cvs(false);
                }

            }
        }
    })
    useEffect(() => {
        run({ url: "/ngic-promote-company/omCompanyCertificateAudit/queryBeforeAddAudit", params: {} })
    }, [])

    const columns = [
        {
            "title": "证书类型名",
            "dataIndex": "certificateName",
            "key": "certificateName"
        },
        {
            "title": "生效日期",
            "dataIndex": "validDate",
            "key": "validDate"
        },
        {
            "title": "失效日期",
            "dataIndex": "expireDate",
            "key": "expireDate"
        },
        {
            "title": "文件",
            "dataIndex": "urlIds",
            "key": "urlIds",
            render: (_, row) => {
                if (!row.urlIds) {
                    return <Image width={32} height={32} style={{ padding: 2 }} src={require("@/assets/default.png")}></Image>
                } else {
                    return row.urlIds.map(it => {
                        if (["jpg", "png", "jpeg", "gif", "svg"].some((item) => {
                            return it.url.indexOf(item) != -1
                        })) {
                            return <Image key={it.url} width={32} height={32} src={it.url} style={{ padding: 2 }}></Image>
                        } else {
                            return <a>啊大大</a>
                        }

                    })
                }
            }

        }
    ]





    return (
        <div className="nopa autotable">
            <AutoTable
                pagetitle="企业资质"
                pageextra={<a onClick={() => {
                    ciftype({
                        val: "edit",
                        title: "编辑企业资质"
                    })
                    cvs(true);
                }}>
                    编辑
                </a>}
                columns={columns}
                style={{ marginTop: 12 }}
                rowKey={"certificateType"}
                dataSource={data?.detailAuditList || []}
            ></AutoTable>
            <Modal
                maskClosable={false}
                title={iftype.title}
                visible={vs}
                onCancel={() => cvs(false)}
                destroyOnClose={true}
                confirmLoading={loading}
                onOk={() => {
                    let ifs = true;
                    sub.map((it) => {
                        if ((it.validDate && !it.expireDate) || (!it.validDate && it.expireDate)) {
                            ifs = false
                        }
                    })
                    if (!ifs) {
                        message.warn("请检查您选择的日期区间！")
                        return
                    }
                    run({ url: "/ngic-promote-company/omCompanyCertificateAudit/save", params: { detailAuditList: sub } })
                }}
            >
                {
                    data?.detailAuditList && data?.detailAuditList.map((item, index) => {
                        let curfields = JSON.parse(JSON.stringify(defaultFields)), defaultsub = {};
                        for (let i in curfields) {
                            curfields[i].value = item[i];
                            defaultsub[i] = item[i];
                        }

                        return <div key={index}>
                            <p className="title">
                                {item.certificateName}
                            </p>
                            <InitForm
                                fields={curfields}
                                actions={() => null}
                                onChange={(changedValues, allValues) => {
                                    dosub(sub => {
                                        sub = sub.map((it, ind) => {
                                            if (ind == index) {
                                                return {
                                                    ...it,
                                                    ...allValues
                                                }
                                            } else {
                                                return it
                                            }

                                        })
                                        return sub
                                    })
                                }}
                                submitting={
                                    loading || !vs
                                }
                                effect={true}
                            >
                            </InitForm>
                            <Divider style={{ marginTop: 0 }}>

                            </Divider>

                        </div>
                    })
                }

            </Modal>
        </div >
    )
}

export default Certificate